<template>
	<!-- 面粉--动态详情 -->
	<view class="flourdetails">
		<!-- 
		<view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+  menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title">动态详情</view>
		</view> -->

		<!-- <view class="callingBox" :style="'padding-top:'+ (2*menuButtonInfo.top+76) + 'rpx'"> -->
		<view class="callingBox">
			<image class="callingImg" :src="ouserObjs.user.avatar"></image>
			<view class="callingConter">
				<view>{{ouserObjs.user.nickname}}</view>
				<view>{{ouserObjs.user.gender == 1 ? '男性' : ouserObjs.user.gender == 2 ? '女性' : '未知'}} ·
					{{ouserObjs.user.age}}岁 · {{ouserObjs.user.address}}
				</view>
			</view>

			<view v-if="!dynamicisTrue" @click="userFollow"
				:class="(ouserObjs.followStatus == '00' || ouserObjs.followStatus == '01') ? 'callingBut0' : ouserObjs.followStatus == '10' ? 'callingBut1' : ouserObjs.followStatus == '11'? 'callingBut2' : ''">
				<image class="callingButImg" v-if="ouserObjs.followStatus == '11'"
					src="https://z3.ax1x.com/2021/09/02/hrAaWD.png"></image>
				{{(ouserObjs.followStatus == "00" || ouserObjs.followStatus == "01") ? "关注" : ouserObjs.followStatus == "10" ? "已关注" : ouserObjs.followStatus == "11" ? "相互关注" : '被关注'}}
			</view>
			<view v-if="dynamicisTrue" @click="moreDot = !moreDot" class="moreDotFx">
				<u-icon name="more-dot-fill" color="#000" size="35"></u-icon>
				<view v-if="moreDot" class="moreDotBox" @click.stop="zJianJian">
					<image src="/static/lj.png"></image>
					<span>删除</span>
				</view>
			</view>
		</view>

		<view class="wrap">
			<u-swiper border-radius=0 mode="dot" height=750 :list="ouserObjs.imageList" @click="imgSession"></u-swiper>
		</view>

		<view class="wenzhangBox">
			<view class="wenzhanTitle" v-if="ouserObjs.activityName"><span>#</span>{{ouserObjs.activityName}}</view>
			<view class="wenzhanText">{{ouserObjs.content}}</view>
			<view class="wenzhandate">{{ouserObjs.createTime}}</view>
		</view>

		<view class="icons">
			<view class="iconItem" v-for="(item,index) in iconArr" :key="index">
				<button class="iconItembuts" open-type="share" v-if="index == 0">
					<image class="iconItem_img" style="transform: translateY(4px);" :src="item.src"></image>
					<view class="iconItem_text" :style="{color : index==2 ? '#F10200' : '#606266'}">{{item.name}}</view>
				</button>

				<view class="iconItem" v-if="index != 0" @click="ffShow(index)">
					<image class="iconItem_img" :src="item.src"></image>
					<view class="iconItem_text" :style="{color : (index==2 && item.isTrue) ? '#F10200' : '#606266'}">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<!-- 评论列表 -->
		<view class="pinlunTitle">评论({{pinlunArr.length}})</view>
		<view class="pinlunBox">
			<view class="pinlunItem" v-for="(item,index) in pinlunArr" :key="index">
				<view class="imgBox">
					<image class="pinlunItemImg" :src="item.avatar"></image>
				</view>
				<view class="pinlunItemBox">
					<view class="pinlunItemName">{{item.nickname}}</view>
					<view class="pinlunItemText">{{item.content}}</view>
					<view class="pinlunItemDate">{{item.createTime}}</view>
				</view>
			</view>
			<loading :toast="loadStatux" :title="'暂无评论'"></loading>
		</view>
		<!-- <empty v-else title="暂无评论"></empty> -->


		<!-- 评论输入框 -->
		<view class="pinlinBoxx" v-show="isShow" @click="ffClose">
			<view class="pinglunkom" @click.stop="ff" :style="{bottom: `${tishiHeight}px`}">
				<textarea type="text" :focus="isShow" cursor-spacing=0 @blur.stop="blurTextarea"
					@focus.stop="focusTextarea" class="pinglunkomInpt" :adjust-position="false" :hold-keyboard="true"
					auto-height=true v-model="textareaValue" placeholder="说点什么吧~" :show-confirm-bar="false" />
				<view class="pinglunkomBut" @click.stop="dynamiccommentpinglun">评论</view>
			</view>

		</view>

		<!-- 相互关注 -->
		<u-popup v-model="isPuper" mode="center" border-radius="12">
			<view class="puperBox">
				<image class="puperBoxImg" src="https://z3.ax1x.com/2021/09/02/hrR3PH.png"></image>
				<view class="puperBoxTitle">相互关注</view>
				<view class="puperBoxText">一定是有种特殊吸引力</view>
				<view class="puperBoxButs" @click="isPuper = false">
					知道了
				</view>
			</view>
		</u-popup>


		<!-- 删除动态 -->
		<u-popup border-radius="20" mode="center" v-model="deletShow">
			<view class="deletBox">
				<view class="deletBoxTitle">删除这条动态吗?</view>
				<view class="deletBoxBody">
					<view class="deletBut" @click.stop="deletShow = false">取消</view>
					<view class="deletBut qding_" @click.stop="deleMore">确定</view>
				</view>
			</view>
		</u-popup>


		<!--  -->
		<perfectbox :img="imgs" pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isTaost"
			@ff_show="ffShows">
		</perfectbox>
	</view>
</template>
<script>
	import loading from "../../../components/loading/loading.vue"
	import empty from "@/components/defaultpage/empty.vue"
	import perfectbox from "../../../components/perfectbox/perfectbox.vue"
	let that = this;
	export default {
		data() {
			return {
				ouserObjs: {},
				tishiHeight: 0,
				state: 0,
				title: 'flourdetails',
				isShow: false,
				isPuper: false,
				textareaValue: "",
				pinlunArr: [],
				iconArr: [{
						// src: 'https://z3.ax1x.com/2021/09/02/hD2bwD.png',
						src: require('../../../static/fenxiang.png'),
						name: '分享'
					},
					{
						src: require('../../../static/icon_Comment.png'),
						name: '评论'
					},
					{
						src: require('../../../static/icon_like_selected.png'),
						name: 1354
					},
				],
				loadStatux: 'Loading',
				// menuButtonInfo: {
				// 	top: 25
				// },
				moreDot: false,
				dynamicisTrue: false,
				deletShow: false,
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isTaost: 2,
				imgs: '',
				inviteCodex: '',

			}
		},
		watch: {
			// state(newer,older){
			// 	if(older == 0 && newer == 2){
			// 		this.isPuper = true;
			// 	}
			// }
		},
		onShow(optiom) {
			this.initOnShow();
		},
		components: {
			perfectbox,
			empty,
			loading,
		},
		onLoad(optiom) {
			// this.that = this;
			// debugger

			if (optiom.dynamicId) {
				this.dynamicId = optiom.dynamicId;
				this.initDynamic();
				this.dynamiccomment();
				if (optiom.isTrue) {
					this.dynamicisTrue = optiom.isTrue;
				}
			} else {
				this.dynamicId = 2;
				this.dynamicisTrue = true;
			}

			// this.init();
		},
		methods: {
			ffShows() {
				this.isTaost = 2;
			},
			initOnShow() {
			
				return new Promise((ress, rejj) => {
					this.$apis.accountInfo().then(res => {
						if (res.code == 200) {
							this.userPhoneApi = res.data.phone;
							this.imgs = res.data.awardPrivilegeBg;
							if (res.data.needInviteCode) {

								if (res.data.inviteCode) {
									this.inviteCodex = res.data.inviteCode.code;
									if (!res.data.isMember) {
										// debugger
										// this.isShow = 0
										// this.$emit('updataShow',)


										this.isTaost = 0;
										ress();

									} else {
										// debugger
										// this.isShow = 2
										// this.$emit('updataShow',2)
										// ress(2);
										this.isTaost = 2;
										ress();
									}
								}
							} else {
								if (!res.data.isMember) {
									// debugger
									// this.$emit('updataShow',1)
									// ress(1);
									this.isTaost = 1;
									ress();
									// this.isShow = 1
									// 

								} else {
									// debugger
									// this.$emit('updataShow',2)
									// ress(2);
									this.isTaost = 2;
									ress();
									// this.isShow = 2
								}
							}
						}



						console.log("个人信息成功", res)
					}).catch(err => {
						// this.isShow = 0;

						// ress(0);
						this.isTaost = 0;
						ress();
						console.log("个人信息错误", err)
					})
				})




				// let labelCode
				// uni.getStorage({
				//     key: 'labelCode',
				//     success: res => {
				//         console.log(res.data);
				// 		if(res.data == 200){
				// 			uni.showToast({
				// 				title: "已保存，可在「我的-名片」修改",
				// 				icon: "none",
				// 				duration: '2500'
				// 			})
				// 			uni.removeStorage({
				// 			    key: 'labelCode'
				// 			});
				// 		}
				//     }
				// });
			},
			// 关注按钮
			userFollow() {

				this.initOnShow().then(ress => {
					if (this.isTaost == 2) {
						this.$apis.userFollow(
							this.ouserObjs.userId
						).then(res => {
							console.log('userFollow====>', res)
							if (res.code == 200) {
								// "data": "10" //关注状态 00未关注 10=已关注 01=被关注 11=相互关注
								// console.log(res.data)
								if (res.data == "10" || res.data == "01") {
									uni.showToast({
										title: '已关注',
										duration: 2000
									})
								} else if (res.data == "00") {
									uni.showToast({
										title: '关注已取消',
										duration: 2000
									})
								} else if (res.data == "11") {
									this.isPuper = true;
								}
								this.ouserObjs.followStatus = res.data;
							}
						})

					}
				})

			},

			zJianJian() {
				this.moreDot = false;
				this.deletShow = true;


			},
			// 删除动态
			deleMore() {
				// uni.showLoading({
				// 	title: '删除中...',
				// 	mask: true
				// });
				// console.lof
				this.$apis.dynamicDelete(
				 this.dynamicId
				).then(res => {
					if (res.code == 200) {
						// debugger
						// uni.navigateTo({
						// 	url: '../../my/my'
						// })
						// uni.navigateBack()

						uni.switchTab({
							url: '../../my/my'
						})
						uni.showToast({
							title: '已删除',
							duration: 2000
						});



					}
				})
			},
			// 动态详情
			initDynamic() {
				// /amianfrontend/dynamic/{dynamicId}
				this.$apis.dynamic(
					this.dynamicId
				).then(res => {
					if (res.code == 200) {
						// console.log('dynamiclist==>',res)
						let newData = res.data;
						console.log("前====》", newData.createTime)
						newData.createTime = this.$Tools.setTime(newData.createTime);
						console.log("后====》", newData.createTime)
						this.ouserObjs = newData;
						this.iconArr.forEach((item, index) => {
							if (index == 2) {
								item.name = this.ouserObjs.dynamicLikeNum;
								item.isTrue = this.ouserObjs.dynamicLike;
								if (this.ouserObjs.dynamicLike) {
									item.src = require('../../../static/icon_like_selected_act.png') ;
								} else {
									item.src = require('../../../static/icon_like_selected.png') ;
								}
							}
						})
					}
				})

			},
			// 用户点亮/取消动态爱心
			loving() {
				this.$apis.dynamicClike(
				 this.dynamicId
				).then(res => {
					if (res.code == 200) {
						if (this.iconArr[2].isTrue) {
							this.iconArr[2].name--;
							this.iconArr[2].src = require('../../../static/icon_like_selected.png') ;
						} else {
							this.iconArr[2].src = require('../../../static/icon_like_selected_act.png') ;
							this.iconArr[2].name++;
						}
						this.iconArr[2].isTrue = !this.iconArr[2].isTrue;
						uni.showToast({
							title: this.iconArr[2].isTrue ? '已点赞' : '点赞已取消',
							// icon : 'error',
							duration: 2000
						})
					}
				})
			},
			// dynamiclike
			//  amianfrontend/dynamic/comment/
			// 动态评论列表
			dynamiccomment() {
				this.loadStatux = "Loading"
				this.$apis.dynamicCommentId(
					 this.dynamicId
				).then(res => {
					if (res.code == 200) {
						if (res.rows.length != 0) {
							console.log('动态评论列表===>', res.rows)
							let newRows = res.rows;
							newRows.forEach(item => {
								item.createTime = this.$Tools.setDate(item.createTime, 1);

							})
							this.pinlunArr = newRows;
							this.loadStatux = "moduleNomore"
						} else {
							this.loadStatux = "empty"
						}

					}
				});
			},
			// new Date('2021-08-04T12:24:33.000+0800').getTime();
			// 添加动态评论
			dynamiccommentpinglun() {
				this.textareaValue = this.textareaValue.trim();
				// debugger
				if (this.textareaValue.length != 0) {
					// debugger
					let req = {};
					req.dynamicId = this.dynamicId;
					req.content = this.textareaValue;
					uni.showLoading({
						title: '发送中...',
						mask: true
					});
					this.$apis.dynamicComment(
						 req
					).then(res => {
						console.log('dynamiccomment==>', res)
						// this.dynamiccomment
						uni.showToast({
							title: '已评论',
							duration: 2000
						});
						this.isShow = false;
						this.tishiHeight = 0;
						this.textareaValue = '';
						this.dynamiccomment();
					})
				} else {
					uni.showToast({
						title: '不能为空',
						icon: "error",
						duration: 2000
					});
				}
			},
			ff() {},
			ffClose() {

				this.tishiHeight = 0;
				this.isShow = false;
			},
			blurTextarea(e) {
				// if (this.textareaValue.length != 0) {
					console.log("失去焦点了===>")
					this.isShow = false;
					this.tishiHeight = 0;
				// }

			},
			focusTextarea(e) {
				this.tishiHeight = e.detail.height <= 0 ? 0 : e.detail.height;
				console.log("this.tishiHeight===>", e.detail.height)
			},

			goNavigateBack() {
				uni.navigateBack()
			},
			ffShow(index) {
				// debugger
				this.initOnShow().then(ress => {
					// debugger
					if (this.isTaost == 2) {
						if (index == 1) {
							// debugger
							this.isShow = true;
						} else if (index == 2) {
							this.loving();
						}
					}
				})


			},
			imgSession(index) {
				// debugger
				uni.previewImage({
					urls: this.ouserObjs.imageList,
					loop: true,
					current: index
				});
			},
		}
	}
</script>

<style lang="scss">
	.flourdetails {
		padding-bottom: 140rpx;

		.bg_top {
			width: 750rpx;
			background-color: #ffffff;
			position: fixed;
			z-index: 9;
		}

		.dot {
			filter: grayscale(80%);
			filter: gray;
		}

		.z_index {
			z-index: 10;
		}

		.top {
			width: 750rpx;
			height: 48rpx;
			background-color: #FFFFFF;
			position: fixed;
			padding-bottom: 20rpx;
		}

		.top_icon {
			margin-left: 32rpx;
			display: inline-block;
		}

		.top_title {
			position: absolute;
			font-size: 34rpx;
			font-weight: 500;
			line-height: 48rpx;
			display: inline-block;
			left: 50%;
			transform: translate(-50%);
			font-family: PingFang SC, PingFang SC-Medium;
			color: #000000;
		}

		.callingBox {
			display: flex;
			width: 100%;
			padding: 25rpx 22rpx;
			box-sizing: border-box;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;


		}

		.callingImg {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			flex: 0 0 112rpx;
		}

		.callingConter {
			flex: 0 0 440rpx;
			width: 440rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 24rpx;
			box-sizing: border-box;

			view {}

			view:nth-child(1) {
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Medium;
				font-weight: 700;
				text-align: LEFT;
				color: #2d3034;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}

			view:nth-child(2) {
				font-size: 26rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: LEFT;
				color: #606266;
				margin-top: 5rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}
		}

		.callingBut0 {
			width: 88rpx;
			height: 50rpx;
			opacity: 1;
			background: #f10200;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			color: #fff;
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
			font-weight: 500;
			position: absolute;
			right: 20rpx;
		}

		.callingBut1 {
			width: 95rpx;
			height: 50rpx;
			opacity: 1;
			background: #909499;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			color: #fff;
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
			font-weight: 500;
			position: absolute;
			right: 20rpx;
		}

		.callingBut2 {
			height: 50rpx;
			display: flex;
			align-items: center;
			padding: 0 11rpx;
			opacity: 1;
			background: #f10200;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			color: #000;
			font-size: 26rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
			font-weight: 800;
			position: absolute;
			right: 20rpx;
		}

		// <view v-if="dynamicisTrue" @click="moreDot = !moreDot" class="moreDotFx">
		// 	<u-icon name="more-dot-fill" color="#000" size="35"></u-icon>
		// 	<view class="moreDotBox">
		// 		<image src="https://z3.ax1x.com/2021/09/10/hXRb4I.png"></image>
		// 		删除
		// 	</view>
		// </view>
		.moreDotFx {
			position: absolute;
			color: #000;
			right: 20rpx;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.moreDotBox {
			position: absolute;
			background: rgba(0, 0, 0, .9);
			width: 120rpx;
			/* padding: 0 15rpx; */
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 15rpx;
			left: -66rpx;
			top: 60rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				display: inline-block;
				font-size: 13px;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				color: #fff;
				height: 40rpx;
				line-height: 40rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		// <u-popup mode="content" v-model="deletShow">
		// 	<view class="deletBox">
		// 		<view class="deletBoxTitle">删除这条动态吗?</view>
		// 		<view class="deletBoxBody">
		// 			<view class="deletBut">取消</view>
		// 			<view class="deletBut qding_">确定</view>
		// 		</view>
		// 	</view>
		// </u-popup>
		.deletBox {
			width: 590rpx;
			height: 296rpx;
			padding: 54rpx 30px 30px;
			box-sizing: border-box;
		}

		.deletBoxTitle {

			height: 98rpx;
			line-height: 98rpx;
			font-size: 36rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #2d3034;
		}

		.deletBoxBody {
			display: flex;
			margin-top: 30rpx;
		}

		.deletBut {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #909499;
			flex: 1;
		}

		.qding_ {
			color: #f10200 !important;
		}

		.moreDotBox::after {
			content: "";
			width: 0;
			height: 0;
			border: 20rpx solid transparent;
			border-bottom: 20rpx solid rgba(0, 0, 0, 0.9);
			;
			position: absolute;
			top: -36rpx;
			right: 17%;

		}

		.callingButImg {
			width: 30rpx;
			height: 30rpx;
		}

		.wrap {
			width: 750rpx;
			height: 750rpx;
		}

		.u-indicator-item-dot-active {
			background: #2d3034 !important;
		}

		.wenzhangBox {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			border-bottom: 2rpx #e4e6e8 solid;
		}

		.wenzhanTitle {
			background: #f5f6f9;
			border-radius: 19px;
			color: #606266;
			font-size: 26rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #606266;
			padding: 6rpx 20rpx;
			display: inline-block;

			span {
				font-weight: 600;
				padding-right: 5rpx;
			}
		}

		.wenzhanText {
			font-size: 30rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #2d3034;
			line-height: 45rpx;
			margin: 20rpx 0;
		}

		.wenzhandate {
			font-size: 26rpx;
			font-family: Montserrat, Montserrat-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #909499;
		}

		.icons {
			width: 100%;
			/* height: 90rpx; */
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			/* justify-content: space-evenly; */
			/* padding: 0rpx 40rpx; */
			/* box-sizing: border-box; */
			position: fixed;
			padding-bottom: 34rpx;
			bottom: 0px;
			left: 0px;
			background: #fff;
			border-top: 2rpx #e4e6e8 solid;
			z-index: 1;
			overflow: hidden;
		}

		.iconItem {
			width: 100%;
			height: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
		}

		.iconItembuts {
			outline: 0px transparent solid;
			border: 0px transparent solid;
			width: 100%;
			height: 90rpx;
			margin: 0px;
			padding: 0px;
			text-align: center;
			background: #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			// transform: translateY(8rpx);
		}

		.iconItembuts::after {
			border: none;
		}

		.iconItem_img {
			width: 44rpx;
			height: 44rpx;
		}

		.iconItem_text {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: CENTER;
			color: #606266;
		}

		.pinlunTitle {
			font-size: 30rpx;
			font-family: Montserrat, Montserrat-SemiBold;
			font-weight: SemiBold;
			text-align: LEFT;
			color: #2d3034;
			margin: 30rpx 40rpx 0;
			font-weight: bold;
		}

		.pinlunBox {
			margin: 0rpx 0 0 40rpx;

		}

		.pinlunItem {
			display: flex;
			margin: 25rpx 0 15rpx;
		}

		.pinlunItemBox {
			margin-left: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx #ecf0f3 solid;
			width: 100%;
		}

		.pinlunItemImg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.pinlunItemName {
			font-size: 26rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
			font-weight: 600;
			text-align: LEFT;
			color: #2d3034;
		}

		.pinlunItemText {
			font-size: 26rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			text-align: JUSTIFIED;
			color: #606266;
			font-weight: 500;
			text-align: JUSTIFIED;
			color: #606266;
			line-height: 37rpx;
			margin: 12rpx 0;
			padding-right: 39rpx;
			box-sizing: border-box;
			word-break: break-all;
			word-wrap: break-word;
		}

		.pinlunItemDate {
			font-size: 22rpx;
			font-family: Montserrat, Montserrat-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #909499;
		}

		.pinlinBoxx {
			background-color: rgba(0, 0, 0, 0.45);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: 99;
			transition: all .7;
		}

		.pinglunkom {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 40rpx 40rpx;
			position: fixed;
			left: 0px;
			width: 100%;
			background-color: #fff !important;
			box-sizing: border-box;
		}

		.pinglunkomBut {
			width: 96rpx;
			height: 56rpx;
			opacity: 1;
			background: #f10200;
			border-radius: 8rpx;
			color: #fff;
			font-size: 15px;
			font-family: Source Han Sans CN, Source Han Sans CN-Medium;
			font-weight: 500;
			text-align: center;
			line-height: 56rpx;

		}

		.pinglunkomInpt {
			flex: 1;
			margin-right: 30rpx;
		}

		// <view class="puperBox">
		// 	<image class="puperBoxImg" src="https://z3.ax1x.com/2021/09/02/hrR3PH.png"></image>
		// 	<view class="puperBoxTitle">相互关注</view>
		// 	<view class="puperBoxText">一定是有种特殊吸引力</view>
		// 	<view class="puperBoxButs">
		.puperBox {
			width: 550rpx;
			height: 514rpx;
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 2rpx 0px 0px #ededed inset;
			text-align: center;
		}

		.puperBoxImg {
			width: 160rpx;
			height: 160rpx;
			margin: 60rpx 0px 0px;
		}

		.puperBoxTitle {
			font-size: 18px;
			font-family: Source Han Sans SC, Source Han Sans SC-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #2d3034;
			margin: 28rpx 0 15rpx;
		}

		.puperBoxText {
			font-size: 30rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 500;
			text-align: CENTER;
			color: #606266;
		}

		.puperBoxButs {
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #606266;
			border-top: 2rpx solid #e3e4e4;
			height: 100rpx;
			line-height: 100rpx;
			/* background: #360; */
			position: absolute;
			width: 100%;
			bottom: 0px;
		}
	}
</style>
